<template>
  <el-dialog
    class="dialog"
    title="流程设计"
    :visible="dialogFormVisible"
    v-if="dialogFormVisible"
    @close="close"
    close-on-click-modal
    :fullscreen="true"
    :close-on-press-escape="false"
  >
    <iframe id="bdIframe" :src="url" frameborder="0" style="width: 100%; height: 100%" scrolling="no"></iframe>
  </el-dialog>
</template>

<script>
  import { serviceURL } from '@/config'

  export default {
    name: 'ModelerDesign',
    data() {
      return {
        dialogFormVisible: false,
        url: '#',
      }
    },
    created() {},
    methods: {
      showEdit(row) {
        this.url = serviceURL + '/editor?modelId=' + row.id + '&ACCESS-TOKEN=' + this.$store.getters['user/accessToken']
        this.dialogFormVisible = true
        setTimeout(function () {
          // iframe-宽高自适应显示
          const oIframe = document.getElementById('bdIframe')
          const deviceWidth = document.documentElement.clientWidth
          const deviceHeight = document.documentElement.clientHeight
          oIframe.style.width = Number(deviceWidth) + 'px' //数字是页面布局宽度差值
          oIframe.style.height = Number(deviceHeight) - 60 + 'px' //数字是页面布局高度差
        }, 300)
      },
      close() {
        this.$baseConfirm('请确认内容是否已保存？', null, () => {
          this.dialogFormVisible = false
        })
      },
    },
  }
</script>

<style scoped>
  .dialog /deep/ .el-dialog__body {
    padding: 0px !important;
  }
</style>
